<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 
      1绑定方式,1.1直接在dom中修改数据1.2在dom中调用method中的函数
      2.data中的方法this指向window,要拿数据的话拿不到,所以在method中写方法,并且不能写箭头函数
      3.事件对象及事件函数传参:3.1调用不写()也能正常调用,写也可以调用
      3.2不写(),形参书写字符接收,接收到的是事件对象
      3.3写()是为了方便传参,传参后想要拿到事件对象,在实参中书写$event,形参用字符接收


      4.修饰符
      4.1:stop阻止事件传播,写在最里面
      4.2prevent,阻止默认行为,(如鼠标右键事件(contextmenu)),常用于form表单的submit提交事件
      4.3capture,将事件传播转为捕获(外面的先执行,里面后执行),外面书写,每个都要写
      4.4self,事件的e.target是不是自己是自己才执行
      4.5once,事件只执行一次
     -->
    
  </div>
  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el:"#app",
      data(){
        return {
          msg:"hello vue"
        }
      }
    })
    </script>
</body>
</html>
